<template>
  <div id="div1">
    <div id="div1-1">
      <vxe-button class="div1-1-button1" @click="addOperation">新增接口</vxe-button>
      <vxe-button class="div1-1-button2" @click="delOperation">删除接口</vxe-button>
      <vxe-button class="div1-1-button3" @click="saveAsset">保存</vxe-button>
    </div>
    <div id="div1-2">
      <vxe-table keep-source ref="t1Ref" height="100%" :edit-config="{ trigger: 'click', mode: 'cell',activeMethod:()=>true }"
                 @checkbox-change="changeOperation" :checkbox-config="{ highlight: true }" auto-resize :data="tableData">
        <vxe-table-column type="checkbox" width="60"></vxe-table-column>
        <vxe-table-column type="seq" width="60"></vxe-table-column>
        <vxe-table-column field="operationname" title="接口名称" :edit-render="{
                                immediate: true,
                                name: 'input',
                                attrs: {type: 'text'}

        }">
        </vxe-table-column>
        <vxe-table-column field="method" title="方式" :edit-render="{
                               immediate: true,
                                name: '$select',
                                props: {type: 'select'},
                                options: methodOptions,
                                events: {
                                }
        }"></vxe-table-column>
        <vxe-table-column field="path" title="路径" :edit-render="{
                                immediate: true,
                                name: 'input',
                                attrs: {type: 'text'}

        }">
        </vxe-table-column>
        <vxe-table-column field="status" title="状态" :edit-render="{
                               immediate: true,
                                name: '$select',
                                props: {type: 'select'},
                                options: statusOptions,
                                events: {
                                }
        }"></vxe-table-column>
        <vxe-table-column field="description" title="描述" :edit-render="{
                                immediate: true,
                                name: 'input',
                                attrs: {type: 'text'}
        }"></vxe-table-column>
      </vxe-table>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: "OperationList",
  data() {
    return {
      statusOptions: [
        {label: '正常', value: '1'},
        {label: '禁用', value: '0'},
      ],
      methodOptions: [
        {label: 'GET', value: 'GET'},
        {label: 'POST', value: 'POST'},
        {label: 'PUT', value: 'PUT'},
        {label: 'DELETE', value: 'DELETE'},
      ],
      tableData: [
        {id:'1',operationname: '新建用户',method:'GET',path:'/user', status:'0',description: '新增用户接口'},
      ],
      selectedData: [],
    }
  },
  mounted() {
    this.loadData();
  },
  computed: {},
  methods: {
    addOperation() {
      const self = this;
      self.$refs.t1Ref.insertAt({}, -1);
      // this.tableData.push({seq: this.tableData.length + 1, type: '', code: '', amount: 0})
    },
    delOperation() {
      const self = this;
      self.$refs.t1Ref.removeCheckboxRow();
    },
    changeOperation({records}) {
      this.selectedData = records;
      console.log('rows', JSON.stringify(records))
    },
    changeAllOperation(records) {
      console.log('all', JSON.stringify(records));
    },
    loadData() {
      request({
        url: '/user/operation',
        method: 'get',
        withCredentials: true,
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + localStorage.getItem('token')
        },
        params: {
          size: -1
        }
      }).then(response => {
        if (response && response.data) {
          console.log('response', response);
          const tempList = [];
          response.data.records.forEach(item => {
            tempList.push({
              id: item.id,
              operationname: item.operationname,
              method: item.method,
              path: item.path,
              status: item.status,
              description: item.description,
            })
          })
          this.tableData = tempList;
        }
      }).catch(error => {
        console.log('error', error);
        this.$message.error('加载数据失败')
      })
    },
    saveAsset() {
      const self = this;
      const {
        insertRecords,
        updateRecords,
        removeRecords
      } = JSON.parse(JSON.stringify(self.$refs.t1Ref.getRecordset()));
      request({
        url: '/user/operation/batch',
        method: 'post',
        data: {
          insertAndUpdate: updateRecords.concat(insertRecords),
          del: removeRecords
        }
      }).then(response => {
        if (response && response.data) {
          this.$message.success('保存成功');
          this.loadData();
        }
      }).catch(error => {
        console.log('error', error);
        this.$message.error('保存失败')
      })
    }
  }
}
</script>

<style scoped>
#div1{
  width: 100%;
  height: 100%;
  position: relative;
}

#div1-1{
  width: 100%;
  height: 10%;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.div1-1-button1{
  top: 20px;
  right: 20px;
  width: 80px;
  position: absolute;
}

.div1-1-button2{
  top: 20px;
  right: 120px;
  position: absolute;
  width: 80px;
}

.div1-1-button3{
  top: 20px;
  right: 230px;
  position: absolute;
  width: 80px;
}

#div1-2 {
  width: 100%;
  height: Calc(90% - 10px)  ;
  background-color: #606376;
  border-radius: 10px;
  padding: 10px;
  position: absolute;
}

#div1-2 .vxe-table{
}

::v-deep .vxe-table--header-wrapper {
  background-color: #606376 !important;
}
::v-deep .vxe-table--header-wrapper .vxe-header--row {
  background-color: #606376 !important;
  color: white;
}
::v-deep .vxe-table--body-wrapper{
  background-color: #606376 !important;
}
::v-deep .vxe-table--body-wrapper .vxe-body--row {
  background-color: #606376 !important;
  color: white;
}

</style>